<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>校园交流平台</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <!-- 引入vuejs -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--模板通用css-->
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <el-container id="app" v-cloak>
            <div th:replace="fragment/common::header"></div>
            <div class="pad"></div>
            <el-main>
                <el-card  class="box-card">
                    <div style="width:100%;height:100%">
                        <div class="a">
                            <el-menu :default-active="blogTypeIndex" @select="selectBlogType">
                                <el-menu-item v-for="(blogType,index) in blogTypes" :index="blogType.id" :key="index">{{blogType.typeName}}</el-menu-item>
                            </el-menu>
                        </div>
                        <div style="height:100%;width:85%;float:right;">
                            <el-row style="margin-top:30px;">
                                <el-col :span="5" :offset="1">
                                    <el-input v-model="filter.title" placeholder="标题" prefix-icon="el-icon-search" clearable></el-input>
                                </el-col>
                                <el-col :span="5" :offset="1">
                                    <el-input v-model="filter.user" placeholder="作者" prefix-icon="el-icon-search" clearable></el-input>
                                </el-col>
                                <el-col :span="5" :offset="1" style="text-align:right;">
                                    <el-button @click="search" type="primary" icon="el-icon-search">搜索</el-button>
                                </el-col>
                                <el-col :span="5" :offset="1" style="text-align:left;">
                                    <el-button @click="reset" type="primary" icon="el-icon-refresh">重置</el-button>
                                </el-col>
                            </el-row>
                            <el-divider></el-divider>
                            <div v-if="counts==0" class="blogBox" style="text-align:center;line-height:150px;">无数据</div>
                            <div  v-if="counts>0" class="blogBox" v-for="(blog,index) in blogs" :key="index" style="padding:20px;">
                                <div class="blogtop">
                                    <div class="title">{{blog.title}}</div>
                                    <div class="handle">
                                            <el-link :href="'bloginfo?id='+blogs[index].id" type="primary" :underline="false">&nbsp;&nbsp;查看<i class="el-icon-view"></i></el-link>
                                            <el-link :href="'editblog?id='+blogs[index].id" v-if="admin||blog.username==userName" type="warning" :underline="false">&nbsp;&nbsp;修改<i class="el-icon-edit"></i></el-link>
                                            <el-link @click="deleteblog(index)" v-if="admin||blog.username==userName" type="danger" :underline="false">&nbsp;&nbsp;删除<i class="el-icon-delete"></i></el-link>
                                    </div>
                                </div>
                                <el-divider></el-divider>
                                <div class="blogbottom">
                                    <div class="username">{{blog.username}}</div>
                                    <div class="createtime">{{blog.createtime}}</div>
                                    <div class="comment">评论数:{{blog.commentcount>9999?'9999+':blog.commentcount}}</div>
                                </div>
                            </div>
                            <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="currentPage" 
                                :total="counts" :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" 
                                @current-change="currentPageChange" @size-change="pageSizeChange"
                                 style="float:right;margin-top:30px;margin-bottom:53px;">
                            </el-pagination>
                        </div>
                    </div>
                </el-card>
            </el-main>
        
    </el-container>
    <script th:inline="javascript">
        new Vue({
            el:'#app',
            data(){
                return{
                	activeIndex: '3',
                    userName:'张三 ',
                    blogTypeIndex:'0',
                    filter:{
                        title:'',
                        user:''
                    },
                    blogs:[],
                    blogTypes:[],
                    counts:0,
                    pagesize:10,//每页条数
                    currentPage:1,//当前页
                    userId:'',//当前登录用户id
                    admin:false,//是否是管理员
                    selectedBlogId:''//当前选中的博客id
                }
            },
            created:function(){
            	this.userName=[[${session.userName}]];
            	//this.userId=[[${session.userId}]];
            	this.admin=[[${session.admin}]];
            	this.initBlogType();//初始化博客类型
            	this.initBlog();//初始化博客
            },
            methods:{
            	//选择nav选项
            	handleSelect(key, keyPath){
                    switch(key){
                    case '1':
                    	window.location.href="index";
                    	break;
                    case '2':
                    	window.location.href="forum";
                        break;
                    case '3':
                    	window.location.href="blog";
                        break;
                    case '4-1':
                        window.location.href="http://www.dl-city.com/";
                        break;
                    case '4-2':
                        window.location.href="http://citytsg.dlut.edu.cn/index.htm";
                        break;
                    case '4-3':
                        window.location.href="http://cityftp.dlut.edu.cn/index.htm";
                        break;
                    case '4-4':
                        window.location.href="http://172.30.2.66/vod/action/indexListAction.do?method=indexShow";
                        break;
                    case '4-5':
                        window.location.href="http://tv.byr.cn/show";
                        break;
                    }
                },
                //选择博客类型
                selectBlogType(key, keyPath){
                    this.blogTypeIndex=key;
                    this.currentPage=1;
                    this.getBlogByFilter();
                },
                //点击搜索
                search(){
                	this.currentPage=1;
                    this.getBlogByFilter();
                },
                //点击重置
                reset(){
                    this.filter={
                        title:'',
                        user:''
                    };
                    this.currentPage=1;
                    this.getBlogByFilter();
                },
                //发请求那各种筛选条件的博客列表
                getBlogByFilter(){
                    var _this=this;
                    $.ajax({
                    	url:'blogsofpage',
                    	type:'GET',
                    	data:{
                    		typeId:_this.blogTypeIndex,
                    		title:_this.filter.title,
                    		userId:_this.filter.user,
                    		nowPage:_this.currentPage,
                    		pagesize:_this.pagesize
                    	},
                    	dataType:'JSON',
                    	success:function(data){
                    		_this.blogs=data.blogs;
                    		_this.counts=data.blogCount;
                    	}
                    });
                },
                initBlogType(){
                	var _this=this;
                	$.ajax({
                		url:'initblogtype',
                		type:'GET',
                		dataType:'JSON',
                		success:function(data){
                			_this.blogTypes=data;
                		}
                	});
                },
                //初始化博客
                initBlog(){
                	this.getBlogByFilter();
                },
                //当前页变化
                currentPageChange(val){
                	this.currentPage=val;
                	this.getBlogByFilter();
                },
                //每页 条数变化
                pageSizeChange(val){
                	this.pagesize=val;
                	this.getBlogByFilter();
                },
                //删除博客
                deleteblog(index){
                	this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                      }).then(() => {
                    	  this.yesdelete(index);
                      }).catch(() => {
                      });
                },
                //确认删除
                yesdelete(index){
                	var _this=this;
                	var paramid=_this.blogs[index].id;
                	$.ajax({
                		url:'deleteblog',
                		type:'GET',
                		data:{
                			id:paramid
                		},
                		dataType:'json',
                		success:function(data){
                			_this.blogs.splice(index,1);
                			_this.counts=_this.counts-1;
                			_this.$message.success("删除成功");
                		}
                	});
                }
                
            }
        })
    </script>
    <style>
        .box-card{
            width:80%;
            margin:0 auto;
        }
        .blogBox{
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            height: 150px;
            margin:0px 0px 10px 0px;
        }
        .a{
            width:10%;
            float: left;
            position: fixed;
            z-index: 20;
        }
        .blogtop{
            height: 50%;
        }
        .title{
            width: 80%;
            line-height: 75px;
            font-size: 20px;
            color: #303133;
            float: left;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .handle{
            width: 20%;
            line-height: 75px;
            float: right;
            text-align: right;
        }
        .blogbottom{
            height: 20px;
        }
        .username{
            float:left;height:100%;width:7%;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            color: #606266;
            line-height: 20px;
        }
        .createtime{
            float:left;height:100%;width:70%;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            color: #606266;
            border-left: 1px solid #606266;
            padding-left: 5px;
            margin-left: 5px;
            line-height: 20px;
        }
        .comment{
            float:right;height:100%;width:20%;
            color: #606266;
            text-align: right;
        }
    </style>
</body>
</html>